<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面-后台管理系统</title>
    <SCRIPT src="__STATIC__/admin/js/jquery-1.9.1.min.js" type="text/javascript"></SCRIPT>
    <link rel="stylesheet" href="__STATIC__/admin/css/common.css?v={$version}" type="text/css">
</head>
<BODY>
<DIV class="top_div" style="height: 300px;">
    <!--<div style=" text-align:center; padding-top: 50px; font-weight: 600; font-size:35px; color: #fff;width:100%;">API 项目后台管理系统</div>-->
</DIV>

<DIV style="background: rgb(255, 255, 255); margin: -100px auto auto; border: 1px solid rgb(231, 231, 231); border-image: none; width: 400px; height: 278px; text-align: center;">
    <DIV style="width: 165px; height: 96px; position: absolute;">
        <DIV class="tou"></DIV>
        <DIV class="initial_left_hand" id="left_hand"></DIV>
        <DIV class="initial_right_hand" id="right_hand"></DIV></DIV>
    <P style="padding: 30px 0px 10px; position: relative;"><SPAN
            class="u_logo"></SPAN>
        <INPUT class="ipt" id="admin_name" type="text" placeholder="请输入用户名或邮箱" value="">
    </P>
    <P style="position: relative;"><SPAN class="p_logo"></SPAN>
        <INPUT class="ipt" id="admin_password" type="password" placeholder="请输入密码" value="">
    </P>
    <P style="position: relative; margin-top: 10px; float: left; margin-left: 30px;">
        <SPAN class="p_logo" style="left: 10px;"></SPAN>
        <INPUT  style="width: 80px;" class="ipt" id="verifyCode" type="text" placeholder="请输入验证码" value="" maxlength="4">
        <SPAN style=" float: right;left: 10px; margin-left: 10px;">
            <img src="{:U('passport/verifycode')}" id="codeimg" title="点击图片换一张" width="132" height="35">
            <a class="click_change" href="javascript:void(0);">点击换一张</a>
        </SPAN>

    </P>
    <DIV style="height: 50px; line-height: 50px; margin-top: 70px; border-top-color: rgb(231, 231, 231); border-top-width: 1px; border-top-style: solid;">
        <P style="margin: 0px 35px 20px 45px;">
           <SPAN style="">
              <A style=" letter-spacing: 10px; margin-top:10px;background: rgb(0, 142, 173); padding: 10px 100px; border-radius: 4px; border: 1px solid rgb(26, 117, 152); border-image: none; color: rgb(255, 255, 255); font-weight: bold; display: block; line-height: 20px; font-size: 20px;"
                 href="javascript:void(0);" id="loginbtn">登录</A>
           </SPAN>         </P>
    </DIV>
</DIV>
<div style="text-align:center; margin-top: 10px;">
    <p>版权所有 智顺网络</p>
</div>
</BODY>
<script src="__STATIC__/layer/layer.js" type="text/javascript"></script>
<SCRIPT type="text/javascript">
    $(function(){
        if (window.top != window)
        {
            window.top.location.href = document.location.href;
        }
        //得到焦点
        $("#password").focus(function(){
            $("#left_hand").animate({
                left: "150",
                top: " -38"
            },{step: function(){
                if(parseInt($("#left_hand").css("left"))>140){
                    $("#left_hand").attr("class","left_hand");
                }
            }}, 2000);
            $("#right_hand").animate({
                right: "-64",
                top: "-38px"
            },{step: function(){
                if(parseInt($("#right_hand").css("right"))> -70){
                    $("#right_hand").attr("class","right_hand");
                }
            }}, 2000);
        });
        //失去焦点
        $("#password").blur(function(){
            $("#left_hand").attr("class","initial_left_hand");
            $("#left_hand").attr("style","left:100px;top:-12px;");
            $("#right_hand").attr("class","initial_right_hand");
            $("#right_hand").attr("style","right:-112px;top:-12px");
        });

        //切换验证码
        $('#codeimg, .click_change').click(function(){
                var src = "{:u('superadmin/passport/verifycode')}&v=";
                $('#codeimg').attr('src', src+ Math.random())

        });

        //提交表单
        $('#loginbtn').click(function(){
            var name = $('#admin_name').val();
            var password = $('#admin_password').val();
            var code = $('#verifyCode').val();
            var url  = "{:u('superadmin/passport/login')}"
            if(name == '')
            {
                $('#admin_name').focus();
                layer.tips('请输入用户名或邮箱', '#admin_name', {
                    tips: [2, '#009f95'],
                    time: 3000
                });
                return false;
            }
            if(password == '')
            {
                $('#admin_password').focus();
                layer.tips('请输入密码', '#admin_password', {
                    tips: [2, '#009f95'],
                    time: 3000
                });
                return false;
            }
            if(code == '')
            {
                $('#verifyCode').focus();
                layer.tips('请输入验证码', '#verifyCode', {
                    tips: [1, '#009f95'],
                    time: 3000
                });
                return false;
            }
            $.post(url,{name:name, password:password, code:code}, function(data){
                if(!data.status)
                {
                    layer.alert(data.msg, {icon:5})
                } else {
                    layer.msg(data.msg, {time:2000,icon:6},function(){
                        window.location.href = "{:u('superadmin/index/index')}"
                    });

                }

            });
        });

    });
</SCRIPT>
</HTML>
